<template>
  <div class="login">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      label-position="left"
      label-width="0px"
      class="login-form"
    >
      <h3 class="login-title">注册</h3>
      <el-form-item prop="username">
        <el-input
          autocomplete="new-password"
          v-model="loginForm.username"
          type="text"
          prefix-icon="el-icon-user-solid"
          placeholder="用户名"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item prop="userno">
        <el-input
          autocomplete="new-password"
          v-model="loginForm.userno"
          type="text"
          prefix-icon="el-icon-user"
          placeholder="账号"
          size="medium"
        ></el-input>
      </el-form-item>
      <el-form-item prop="role">
        <el-select
          style="width: 100%"
          v-model="loginForm.role"
          placeholder="请选择角色"
        >
          <el-option
            v-for="item in rolesOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          autocomplete="new-password"
          v-model="loginForm.password"
          :type="showPassword ? 'text' : 'password'"
          prefix-icon="el-icon-lock"
          placeholder="密码"
          @keyup.enter.native="handleLogin"
          ><i
            slot="suffix"
            class="el-input__icon el-icon-view ui-cous"
            @click="showPassword = !showPassword"
          ></i
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <div class="ui-flex">
          <el-input
            v-model="loginForm.code"
            placeholder="验证码"
            @keyup.enter.native="handleLogin"
            class="ui-flex-1"
            size="medium"
          >
            <svg-icon
              slot="prefix"
              icon-class="validCode"
              class="el-input__icon input-icon ui-mgl-6"
            />
          </el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" />
          </div>
        </div>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button
          :loading="loading"
          size="medium"
          type="primary"
          style="width: 100%"
          @click.native.prevent="handleLogin"
        >
          <span v-if="!loading">注册</span>
          <span v-else>注册中...</span>
        </el-button>
      </el-form-item>

      <el-form-item style="width: 100%">
        <div class="ui-flex">
          <div class="ui-flex-1"></div>
          <el-button size="medium" type="text" @click="login">
            返回登录
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <!--  底部  -->
    <footer />
  </div>
</template>

<script>
import { getRoleAlls } from "@http/system/role.js";
import Footer from "./footer.vue";
import { encrypt } from "@/utils/rsaEncrypt";
import { register } from "@http/login.js";
export default {
  name: "Login",
  components: { Footer },
  data() {
    return {
      codeUrl: "",
      cookiePass: "",
      loginForm: {
        username: "",
        password: "",
        role: "",
        userno: "",
        code: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        userno: [{ required: true, trigger: "blur", message: "账号不能为空" }],
        role: [{ required: true, trigger: "change", message: "角色不能为空" }],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        code: [{ required: true, trigger: "blur", message: "验证码不能为空" }],
      },
      loading: false,
      showPassword: false,
      rolesOptions: [],
    };
  },
  created() {
    this.getCode();

    // 获取角色列表
    getRoleAlls().then((res) => {
      this.rolesOptions = res.data;
    });
  },
  methods: {
    /**
     * @Author: Songjq
     * @Date: 2021-12-16 21:37:53
     * @Fn: 获取验证码
     */
    getCode() {
      this.codeUrl = `${process.env.VUE_APP_BASE_API}api/code?${Math.random()}`;
    },

    /**
     * @Author: Songjq
     * @Date: 2021-12-16 22:56:35
     * @Fn: 注册服务
     */
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        const user = {
          ...this.loginForm,
          password: encrypt(this.loginForm.password),
        };
        if (valid) {
          this.loading = true;
          register(user)
            .then((res) => {
              this.loading = false;
              this.$notify({
                title: res.message,
                type: "success",
              });
              this.$router.push({ path: this.redirect || "/" });
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    /**
     * @Author: Songjq
     * @Date: 2022-01-18 10:11:06
     * @Fn: 登录
     */
    login() {
      this.$router.push({ path: this.redirect || "/" });
    },
  },
};
</script>

<style rel="stylesheet/scss" scoped lang="scss">
</style>
